<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import MarkdownPreview from '@/components/markdown/MarkdownPreview.vue'
import MarkdownToc from '@/components/markdown/MarkdownToc.vue'
import CommentList from '@/components/comment/CommentList.vue'

const route = useRoute()
const id = ref(route.params.id)
console.log(id.value)

const markdownId = 'preview-only'
const text = ref('# Hello Editor')
</script>

<template>
  <div class="blog-detail">
    <div class="left">
      <div class="header">
        <span class="title">Markdown编辑器的使用（md-editor-v3）</span>
        <ul class="author-info">
          <li class="name">海风追潮汐</li>
          <li>2025-04-03</li>
          <li>
            <span>收藏 100</span>
          </li>
          <li>
            <span>点赞 100</span>
          </li>
        </ul>
      </div>
      <MarkdownPreview :id="markdownId" :text="text" />
      <div class="footer">
        <span class="comment">评论</span>
        <CommentList />
      </div>
    </div>
    <div class="right">
      <span class="toc">目录</span>
      <MarkdownToc :id="markdownId" />
    </div>
    <el-backtop />
  </div>
</template>

<style scoped lang="scss">
.blog-detail {
  margin: 20px 180px;
  margin-bottom: 0;
  padding-bottom: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: 3fr 1fr;
  align-items: start;

  .left {
    min-width: 800px;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    .header {
      display: flex;
      gap: 20px;
      flex-direction: column;
      border-bottom: 1px solid #ccc;
      padding: 16px;

      .title {
        display: block;
        font-family: Roboto;
        font-size: 36px;
        font-weight: bold;
        line-height: 40px;
        letter-spacing: normal;
        color: #111827;
      }

      .author-info {
        display: flex;
        gap: 20px;
        align-items: center;

        .name {
          color: #111827;
        }

        li {
          font-family: Roboto;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: normal;
          color: #6b7280;
        }
      }
    }
    .footer {
      padding: 16px;
      border-top: 1px solid #ccc;
      .comment {
        font-family: Roboto;
        font-size: 20px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: normal;
        color: #111827;
      }
    }
  }

  .right {
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
    position: sticky;
    top: 90px;
    background-color: white;
    border-radius: 5px;

    .toc {
      display: block;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px solid #ccc;
    }
  }
}

@media (max-width: 1400px) {
  .blog-detail {
    grid-template-columns: 1fr;
    .right {
      display: none;
    }
  }
}
</style>
